﻿.thumb(@size){
  width:@size;height:@size;line-height:@size;
  img{max-height:@size;max-width:@size;}
}

#header{
  #logo{float:left;}
  #free{float:left;margin-left:20px;}
  #links{float:right;font-size: 85%;}
  #search{float:right;}
  #chat{float:right;margin-right:20px;}
  #call{float:right;font-size:70%;border:1px solid #eee;line-height:15px;text-align:center;clear:right;}
  #menu{clear:both;}
}

#middle{
  #promotions{
    .thumbnail{.thumb(195px);}
  }
}

#footer{
  #newsletter{text-align:center;border-top:1px solid #eee;border-bottom:1px solid #eee;padding-top:5px;margin-top:20px;}
  #about,#information,#follow{}
  #links{clear:both;text-align:center}
  #copyright{clear:both;text-align:center;border-top:1px solid #eee;margin-top:20px;}
}

#catMain{
  .thumbnail{.thumb(100px);display:inline-block;}
  .nav-tabs{margin-bottom:0px;}
  .tab-content{padding:20px;border:1px solid #ddd;margin-top:-1px;}
  .tab-pane div{text-align:center;float:left;width:20%;}
  #items{
    margin-top:20px;
    #header{
	  background-color:#fed;padding:0px 10px;
	  h4{float:left;}
      div{float:right;margin-top:10px;}
	}
	#grid{
	  .thumbnail{.thumb(150px); display:inline-block;}
	  #item{
	    text-align:center;float:left;width:25%;position:relative;height:300px;padding-top:20px;
		#promotion{position:absolute;right:10px;top:10px;}
		div{margin-bottom:5px;}
	  }
	}
	#list{
	  .thumbnail{.thumb(60px); display:inline-block;}
	  #item{
	    position:relative;height:80px;padding-top:10px;border-bottom:1px solid #ddd;
		#photo{float:left;margin-right:20px;}
		#name,#price,#comment{float:left;width:500px;}
		#promotion{position:absolute;left:50px;top:10px;width:20px;}
		#button{float:right;}
	  }
	}
  }
}

#prdMain{
  #photos{
    .thumbnail{.thumb(290px);}
    #otherPhotos{
	  margin-top:10px;
      .thumbnail{.thumb(60px);float:left;margin-right:6px;}
	  .thumbnail:last-child{margin-right:0px;}
	}
  }
  #infos{
    h4{float:left;}
    #share{float:right;}
    p{clear:both;}
    #origPrice, #newPrice{margin:0px 10px;}
    #origPrice{text-decoration:line-through;}
    #newPrice{color:red;font-size:120%;}
    #qty{width:20px;}
    #alsoLike{
      .thumbnail{.thumb(60px);}
    }
  }
  #myTab{margin-top:20px;}
  .nav-tabs{margin-bottom:0px;}
  .tab-content{padding:20px;border:1px solid #ddd;margin-top:-1px;}
}

#userMain{
  .nav-tabs{margin-bottom:0px;}
  .tab-content{padding:20px;border:1px solid #ddd;margin-top:-1px;}
  #profile, #billing{
    th{width:100px;text-align:right;padding-right:10px;vertical-align:middle;}
    td{vertical-align:middle;}
  }
}

#ordMain{
  .ordDetail .thumbnail{.thumb(60px);float:left;margin-right:10px;}
}

#watchMain{
  .thumbnail{.thumb(60px);float:left;margin-right:10px;}
}